<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" :before-close="closeDrawer" :append-to-body="true" size="40%">
    <div class="drawer">
        <el-table :data="tableData" border>
            <el-table-column label="审核状态" prop="check_tag">
                <template slot-scope="scope">
                    <el-link type="primary" @click="showAuditProcess(scope.row.check_no)">{{ scope.row.check_tag }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="变更类型" prop="type_tag"></el-table-column>
            <el-table-column label="承办公司" prop="company.title"></el-table-column>
            <el-table-column label="餐标" prop="price"></el-table-column>
            <el-table-column label="" prop="amount"></el-table-column>
            <el-table-column label="总价" prop="total"></el-table-column>
            <el-table-column label="操作" v-if="hasRule('order-additional-update')">
                <template slot-scope="scope">
                    <el-tag type="primary" size="mini" @click="showEditBom(scope.row)">编辑</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <audit-process-vue ref="processRef"></audit-process-vue>
    <edit-table ref="editTableRef" @doRefresh="getData"></edit-table>
</el-drawer>
</template>

<script>
import {
    getTypeListApi
} from '@/api/order/service';
import process from '@/components/mixins/process';
import editTable from './table-edit.vue';

export default {
    components: {
        editTable
    },
    mixins: [process],
    data() {
        return {
            formDrawer: {
                title: "",
                visible: false,
            },
            tableData: [],
        };
    },
    methods: {
        showDrawer(order_id, type) {
            let titles = {
                1: "加桌",
                2: "减桌",
                3: "加菜",
                4: "减菜",
            };
            this.formDrawer.title = titles[type];
            this.formDrawer.visible = true;
            this.getData(order_id, type)
        },
        showEditBom(row) {
            this.$refs['editTableRef'].showDrawer(row);
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        getData(order_id, type) {
            let params = {
                order_id: order_id,
                type: type
            };
            getTypeListApi(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                }
            })
        },
        hasRule(value) {
            let userRules = localStorage.getItem('btnRules')
            if (userRules == undefined || userRules == null) {
                return false;
            }
        
            let arr = userRules.split(",");
            return arr.includes(value);
        }
    },
};
</script>

<style lang="less" scoped>
.drawer {
    padding: 12px;
}
</style>
